﻿@model Location
@{
    ViewBag.Title = "With";
}

<h2>With</h2>

<p>The with binding creates a new binding context, so that descendant elements are bound in the context of a specified object.</p>

<p><a href="http://knockoutjs.com/documentation/with-binding.html" target="_blank">http://knockoutjs.com/documentation/with-binding.html</a></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.WITH_VIEW_MODEL, Html.CreateVisiToggler("show the samples view model C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))
<br />
@Html.VisiTogglerFromPartial(CodeSamplePartials.WITH_CONTROLLER, Html.CreateVisiToggler("show the samples controller C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<h3>Sample #1</h3>

<h1 @Html.KoAttrText(m => m.City)> </h1>

@{
    var withItem = Html.Ko().KoAttrWith(m => m.Coords);
<p @withItem>
    Latitude: <span @withItem.KoAttrText(m => m.Latitude)> </span>,
    Longitude: <span @withItem.KoAttrText(m => m.Longitude)> </span>
</p>
}

@Html.VisiTogglerFromPartial(CodeSamplePartials.WITH1, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<h3>Sample #2</h3>

<h1 @Html.KoAttrText(m => m.City)> </h1>
@using (var item = Html.KoWith(m => m.Coords))
{
<p>
    Latitude: <span @item.KoAttrText(m => m.Latitude)> </span>,
    Longitude: <span @item.KoAttrText(m => m.Longitude)> </span>
</p>
}

@Html.VisiTogglerFromPartial(CodeSamplePartials.WITH2, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<p>&nbsp;</p>
<p>Next &gt; @Html.ActionLink("Templates", "Templates", "Examples")</p>


@Model.ApplyBindingsScript(KoBindingOptions.IncludeData)